<template>
  <el-form
    ref="dynamicForm"
    :model="formModel"
    label-width="100px"
    @submit.native.prevent
  >
    <el-row :gutter="16">
      <el-col
        v-for="(item,index) in config"
        :key="index"
        :span="item.span?item.span:12"
      >
        <el-form-item
          :prop="item.prop"
          :rules="item.rules"
          :label="item.label"
          :label-position="item.labelPosition?item.labelPosition:'right'"
        >
          <!--输入框表单类型-->
          <el-input
            v-if="item.type ==='text'"
            v-model="formModel[item.prop]"
            :placeholder="item.placeholder?item.placeholder:'请输入'"
          />
          <!--文本域表单类型-->
          <el-input
            v-if="item.type === 'textarea'"
            v-model="formModel[item.prop]"
            type="textarea"
            :placeholder="item.placeholder?item.placeholder:'请输入'"
          />
          <!--checkbox表单类型-->
          <el-checkbox-group
            v-if="item.type === 'checkbox'"
            v-model="formModel[item.prop]"
            :placeholder="item.placeholder?item.placeholder:'请选择'"
          >
            <el-checkbox
              v-for="option in item.data"
              :key="option.id"
              :label="option.id"
            >{{ option.name }}</el-checkbox>
          </el-checkbox-group>
          <!--radio表单类型-->
          <el-radio-group
            v-if="item.type === 'radio'"
            v-model="formModel[item.prop]"
            :placeholder="item.placeholder?item.placeholder:'请选择'"
          >
            <el-radio
              v-for="option in item.data"
              :key="option.id"
              :label="option.id"
            >{{ option.name }}</el-radio>
          </el-radio-group>

          <!--下拉选择类型-->
          <el-select
            v-if="item.type === 'select'"
            v-model="formModel[item.prop]"
            :placeholder="item.placeholder?item.placeholder:'请选择'"
          >
            <el-option
              v-for="option in item.data"
              :key="option.id"
              :label="option.name"
              :value="option.id"
            />
          </el-select>

          <el-date-picker
            v-if="item.type === 'datepicker'"
            v-model="formModel[item.prop]"
            type="date"
            :placeholder="item.placeholder?item.placeholder:'请选择日期'"
          />

          <Upload
            v-if="item.type === 'image'"
            v-model="formModel[item.prop]"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item>
      <el-button
        type="primary"
        @click="submitForm('dynamicForm')"
      >确 定</el-button>
      <el-button @click="resetForm('dynamicForm')">重 置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import Upload from '@/components/Upload/SingleImage2'
export default {
  name: 'DynamicForm',
  components: {
    Upload
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    config: {
      type: Array,
      default() {
        return []
      }
    },
    formData: {
      type: Object,
      default() {
        return {}
      }
    }
  },

  data() {
    return {
      formModel: {}
    }
  },
  watch: {
    /* 实现表单数据的绑定，实时接收父组件的数据变化*/
    formData() {
      this.formModel = this.formData
    }
  },
  mounted() {
    // 将组件上的属性赋值给当前组件内变量，因为props只能单向绑定,还需要监听属性值变化进行父子组件间交互
    this.formModel = this.formData
  },
  methods: {
    // 提交表单数据
    submitForm() {
      this.$refs.dynamicForm.validate(valid => {
        if (valid) {
          // 让父组件接收到响应数据
          this.$emit('submit', this.formModel)
        } else {
          console.log(this.formModel)
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置表单状态
    resetForm() {
      if (this.$refs.dynamicForm) {
        this.$refs.dynamicForm.resetFields()
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-input {
  width: 100% !important;
}

.el-select {
  width: 100% !important;
}
</style>
